<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">Index - {{server}}</h1>
    </div>
    <hr>
    <div class="block">
      <el-carousel height="150px">
        <el-carousel-item indicator-position="outside"  v-for="(k,i) in datalist" :key="i">
          <el-image :src="k.poster"></el-image>
<!--          <h3 class="small">{{ k.name }}</h3>-->
        </el-carousel-item>
      </el-carousel>
    </div>

    <hr>
    <div class="datalist">

      <el-row>
        <el-col :span="4" v-for="(k, i) in datalist" :key="i" :offset="1 > 0 ? 1 : 0">
          <el-card :body-style="{ padding: '0px' }">
            <img :src="k.poster" class="image" @click="link(k.filmId)">
            <div style="padding: 14px;">
              <span>{{ k.name }}</span>
              <div class="bottom clearfix">
                <time class="time">{{ k.filmId }}</time>
                <el-button type="text" class="button" @click="link(k.filmId)">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      server:process.server,
    }
  },
  head () {
    return {
      title: this.server,
      meta: [
        { hid: 'keywords',    name: 'keywords',    content: this.datalist[0].name },
        { hid: 'description', name: 'description', content: 'My custom description' },
      ]
    }
  },
  async asyncData ({app}) {
    return app.$axios({
      url:'https://m.maizuo.com/gateway?cityId=440100&pageNum=1&pageSize=12&type=1&k=7932677',
      method: 'get',
      headers:{
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16082999672528391412580353"}',
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then(res=>{
      console.log('async asyncData', res.data)
      return {
        datalist:res.data.data.films
      }
    })
  },
  methods: {
    link(id) {
      this.$router.push({ path: `/maizuoDetail/${id}`})
    },
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  /*display: flex;*/
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family:
    'Quicksand',
    'Source Sans Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
.datalist{
  width: 100%;
}
.datalist ul li{
  width: 30%;
  height: 80px;
  margin: 3px;
  border-radius: 4px;
  overflow: hidden;
  float: left;
  border: 1px solid #666666;
}
</style>
